<template>
  <div class="main">
    <div class="s1">
      <div class="s1-1"></div>
      <i></i>
      <div class="s1-2 container" style="margin-left: 0px">
        <div class="s1-2-1">
          <span>这里拥有丰富详细的教程</span><br />
          <span>世间成事，不求其绝对圆满，留一份不足，可得无限美好。</span>
        </div>
      </div>
    </div>
    <div class="s2">
      <ul class="breadnav">
        <li><a href="">日常交流</a></li>
        <li><a href="">专业手语</a></li>
        <li><a href="">手语方言</a></li>
        <li><a href="">手语之歌</a></li>
      </ul>
    </div>
    <div class="s3">
      <div id="s3-1-container" class="s3-1 container">
        <div class="s3-1-1">
          <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <span>手语基础教程</span>
        </div>
        <img
          src="../../../assets/img/p1-18.png"
          onclick="javascript:location.href='https://www.bilibili.com/video/BV1LW411s7gR?from=search&seid=8606835984006343109&spm_id_from=333.337.0.0'"
        />
        <img
          src="../../../assets/img/p1-19.png"
          style="margin-left: 50px"
          onclick="javascript:location.href='https://www.bilibili.com/video/BV1bb411k771?from=search&seid=17171025815454556426&spm_id_from=333.337.0.0'"
        />
        <img
          src="../../../assets/img/p1-20.png"
          style="margin-left: 50px"
          onclick="javascript:location.href='https://www.bilibili.com/video/BV1e7411A74r?from=search&seid=14150205177321805845&spm_id_from=333.337.0.0'"
        />
        <img
          src="../../../assets/img/p1-18-2.png"
          onclick="javascript:location.href='https://www.bilibili.com/video/BV1ks411J7H8?from=search&seid=4046022184339711985&spm_id_from=333.337.0.0'"
        />
        <img
          src="../../../assets/img/p1-18-1.png"
          style="margin-left: 50px"
          onclick="javascript:location.href='https://www.bilibili.com/video/BV1Wb4y1t7YK?from=search&seid=17327148416239760320&spm_id_from=333.337.0.0'"
        />
        <img
          src="../../../assets/img/p1-28.png"
          style="margin-left: 50px"
          onclick="javascript:location.href='https://www.bilibili.com/video/BV1KA411V7KC?from=search&seid=5318118091383986451&spm_id_from=333.337.0.0'"
        />
      </div>
    </div>
    <div class="s4">
      <div class="s4-1 container clearfix">
        <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
          <span class="span1">常见问题</span>
          <p class="p1">最新更新于2021/11/17</p>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
          <span>如果识别手语时出现卡顿怎么办？</span>
          <p>退出网页重新进入即可</p>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 pull-right">
          <span>手语未识别出来怎么办？</span>
          <p>
            我们的平台确实不能保证能识别出所有的手语，如果您有遇到识别不出的手语这种情况，可以向我们的邮箱及时反映。感谢您对我们平台手语识别字典的完善！
          </p>
        </div>
      </div>
      <div class="s4-1 container clearfix">
        <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"></div>
        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
          <span>登录后信息全部丢失了怎么办？</span>
          <p>
            建议首先对网页与电脑进行重启，如果重启后还是无法找回数据，请与客服及时联系！
          </p>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 pull-right"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Course",
  data() {
    return {};
  },
  methods: {
    toMain() {
      this.$router.push("/main");
    },
    toLogin() {
      this.$router.push("/login");
    },
    toIdentity() {
      this.$router.push("/identity");
    },
    toRegister() {
      this.$router.push("/register");
    },
    toCourse() {
      this.$router.push("/course");
    },
    toLearn() {
      this.$router.push("/learn");
    },
    toPersonal() {
      this.$router.push("/personal");
    },
  },
  mounted: function () {
    this.$emit("getChildName", "course");
  },
};
</script>

<style lang="css" scoped>
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
}
html,
body {
  font-family: "微软雅黑";
  position: relative;
}
body {
  overflow-x: hidden;
}
li {
  list-style: none;
}
.s2 {
  width: 100%;
}
.s3 {
  width: 100%;
}
@media only screen and (min-width: 993px) {
  .main .s1 {
    height: 278px;
  }
  .s1 .s1-2 {
    padding-top: 90px;
  }
  .main .s3 {
    padding-top: 80px;
  }
}
@media only screen and (max-width: 992px) {
  .main .s1 {
    height: 121px;
  }
  .s1 .s1-2 {
    padding-top: 30px;
  }
  .main .s2 {
    display: none;
  }
  .s3 .s3-1-1 {
    padding: 20px 0px !important;
  }
  .s3 .s3-1-2 .table-border th,
  .s3 .s3-1-2 .table-border td {
    border-right: 1px solid #e2e2e2 !important;
  }
  .s3 .s3-1-2-1,
  .s3 .s3-1-2-6 {
    display: none;
  }
  .s5 {
    display: none;
  }
}
@media only screen and (min-width: 769px) {
  .s1-2 .s1-2-1 span:nth-child(1) {
    font-size: 36px;
  }
  .s1-2 .s1-2-1 span:nth-child(3) {
    font-size: 16px;
  }
}
@media only screen and (max-width: 768px) {
  .s1-2 .s1-2-1 span:nth-child(1) {
    font-size: 20px;
  }
  .s1-2 .s1-2-1 span:nth-child(3) {
    font-size: 12px;
  }
}

@media only screen and (min-width: 370px) and (max-width: 768px) {
  .main .s1 {
    height: 107px;
  }
}
@media only screen and (min-width: 321px) and (max-width: 369px) {
  .main .s1 {
    height: 133px;
  }
}
@media only screen and (max-width: 320px) {
  .main .s1 {
    height: 158px;
  }
}
.main .s1 {
  position: relative;
  z-index: 1;
  margin: 0;
  width: 100%;
  overflow: hidden;
}
.s1 .s1-1 {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("../../../assets/img/p3-1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  background-position: 0 0%;
}
.s1 i {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(48, 48, 48, 0.7);
  z-index: 2;
}
.s1 .s1-2 {
  position: absolute;
  left: 5%;
  right: 5%;
  z-index: 3;
  text-align: center;
}
.s1-2 .s1-2-1 span:nth-child(1) {
  color: #ffffff;
}
.s1-2 .s1-2-1 span:nth-child(3) {
  display: inline-block;
  padding-top: 15px;
  color: #d3d3d3;
}
.main .s2 {
  width: 100%;
  text-align: center;
}
.s2 .breadnav {
  padding: 20px 15px;
  list-style: none;
  background-color: #666666;
  font-size: 15px;
}
.s2 .breadnav > li {
  display: inline-block;
}
.s2 .breadnav > li + li:before {
  padding: 0 30px;
  color: #ccc;
  content: "|\00a0";
}
.s2 .breadnav a {
  color: #ffffff;
  text-decoration: none;
  transition: color 1s;
}
.s2 .breadnav a:hover {
  color: #cccccc;
}
.main .s3 {
  width: 100%;
  margin-left: 150px;
  background: #f9f9f9;
  border-bottom: 1px solid #e2e2e2;
}
.s3 .s3-1,
.s3 .s3-2 {
  margin-bottom: 60px;
}
.s3 .s3-3 {
  margin-bottom: 30px;
}
#s3-1-container > img {
  width: 300px;
  height: 250px;
  margin-bottom: 20px;
  margin-right: 50px;
}
.s3 .s3-1-1 {
  border-left: 1px solid #e2e2e2;
  border-right: 1px solid #e2e2e2;
  border-top: 1px solid #e2e2e2;
  padding: 20px 25px;
  background: #eaeaea;
}
.s3 .s3-1-1 span:nth-child(2) {
  color: #000000;
  font-size: 28px;
  padding: 0 20px;
}
.s3 .s3-1-1 span:nth-child(3) {
  color: #595959;
  font-size: 14px;
}
.s3 .s3-1-2 {
  overflow: hidden;
}
.s3 .s3-1-2 div {
  margin: 0;
  padding: 0;
}
.s3 .s3-1-2-1 .table-border th:nth-child(1) {
  border-top: 2px solid #b2b2b2 !important;
}
.s3 .s3-1-2-2 .table-border th:nth-child(1) {
  border-top: 2px solid #fabb01 !important;
}
.s3 .s3-1-2-3 .table-border th:nth-child(1) {
  border-top: 2px solid #61b0ff !important;
}
.s3 .s3-1-2-4 .table-border th:nth-child(1) {
  border-top: 2px solid #39ceab !important;
}
.s3 .s3-1-2-5 .table-border th:nth-child(1) {
  border-top: 2px solid #e93824 !important;
}
.s3 .s3-1-2-6 .table-border td:nth-child(1) {
  border-top: 2px solid #b2b2b2 !important;
  border-right: 1px solid #e2e2e2;
}
.s3 .s3-1-2 .table-border th,
.s3 .s3-1-2 .table-border td {
  border: 1px solid #e2e2e2;
  border-right: none;
  text-align: center;
  vertical-align: middle;
}
.s3 .s3-1-2 .table-border th {
  color: #333333;
  font-size: 16px;
  padding: 13px 0;
  font-weight: bold;
}
.s3 .s3-1-2 .table-border td {
  color: #333333;
  font-size: 13px;
  padding: 15px 5px;
}
.s3 .s3-1-2 .table-border .a1 {
  text-decoration: none;
  color: #333333;
  cursor: pointer;
}
.s3 .s3-1-2 .table-border .a1:hover {
  color: #61b0ff !important;
  transition: all 500ms linear;
}
.s3 .s3-1-2 .table-border .a2,
.s3 .s3-1-2 .table-border .a3 {
  text-decoration: none;
  color: #61b0ff;
  cursor: pointer;
}
.s3 .s3-1-2 .table-border .a2:hover {
  border: 1px solid #61b0ff;
  padding: 7px 18px;
}

.s3 .s3-1-2 .table-border .a4,
.s3 .s3-3-1 .a4 {
  text-decoration: none;
  background-color: #61b0ff;
  cursor: pointer;
  color: #ffffff;
  font-size: 14px;
  padding: 4px 18px;
  border-radius: 20px;
  display: inline-block;
}
.s3 .s3-1-2 .table-border .a4:hover,
.s3 .s3-3-1 .a4:hover {
  background-color: #3ea3ff;
}
.s3 .s3-1-2 .colororg {
  color: #ff6600 !important;
}
.s3 .s3-1-2 .colorred {
  color: #ff0000 !important;
}
.s3 .s3-1-2 .height1 {
  height: 200px;
}
.s3 .s3-1-2 .height2 {
  height: 71px;
  line-height: 36px;
}
.s3 .s3-1-2 .height3 {
  height: 120px;
}
.s3 .s3-1-2 .height4 {
  height: 881px;
  line-height: 40px;
}
.s3 .s3-3-1 td {
  height: 157px;
  border-top: 2px solid #b2b2b2 !important;
  border: 1px solid #e2e2e2;
  vertical-align: middle;
}
.s3 .s3-3-1 td:nth-child(1) {
  font-size: 18px;
}
.s3 .s3-3-1 td:nth-child(2) {
  text-align: center;
}
.main .s4 {
  width: 100%;
  margin-left: 100px;
  padding-top: 120px;
  padding-bottom: 80px;
}
.s4 .s4-1 div {
  padding-bottom: 25px;
}
.main .s4 span {
  display: inline-block;
  font-size: 16px;
  color: #000000;
  padding-bottom: 20px;
  font-weight: bold;
  line-height: 24px;
}
.main .s4 .span1 {
  display: inline-block;
  font-size: 28px;
  color: #333333;
  padding-bottom: 10px;
  font-weight: normal;
  line-height: 30px;
}
.main .s4 p {
  font-size: 14px;
  color: #696969;
  line-height: 24px;
}
.main .s4 .p1 {
  font-size: 13px;
  color: #696969;
  font-style: italic;
}
.main .s4 i {
  color: #3ea3ff;
  font-style: normal;
}
.main .s5 .container {
  border-top: 1px solid #e2e2e2;
  border-bottom: 1px solid #e2e2e2;
  padding: 30px 0;
  line-height: 30px;
}
.main .s5 p {
  font-size: 16px;
}
.s5 .s5-1 span {
  font-size: 22px;
  padding-right: 50px;
}
.s5 .s5-2 {
  padding-top: 25px;
}
.s5 .s5-2 span {
  font-size: 16px;
  padding-right: 20px;
  color: #494949;
}
</style>
